<template>
  <div class="broad-log-container">
    <div class="broad-log-header">
      <h2>广播日志</h2>
    </div>
    <div class="broad-log-content">
      <el-table
        :data="logData"
        :loading="loading"
        style="width: 100%"
        border
        stripe
        highlight-current-row
      >
        <el-table-column prop="taskName" label="任务名称" width="180" />
        <el-table-column prop="elapsedTime" label="耗时(秒)" width="100" />
        <el-table-column prop="startDate" label="开始时间" width="180" />
        <el-table-column prop="endDate" label="结束时间" width="180" />
        <el-table-column
          prop="result"
          label="执行结果"
          width="100"
        >
          <template #default="scope">
            <el-tag :type="scope.row.result === 1 ? 'success' : 'danger'" effect="plain">
              {{ scope.row.result === 1 ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="showDetail(scope.row)" text>详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        v-model="detailVisible"
        title="广播详情"
        width="800px"
        destroy-on-close
        top="5vh"
        class="broadcast-detail-dialog"
      >
        <div class="log-detail" v-if="currentLog">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="任务名称">
              <span class="detail-value">{{ currentLog.taskName }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="耗时(秒)">
              <span class="detail-value">{{ currentLog.elapsedTime }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="开始时间">
              <span class="detail-value">{{ currentLog.startDate }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="结束时间">
              <span class="detail-value">{{ currentLog.endDate }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="执行结果">
              <el-tag :type="currentLog.result === 1 ? 'success' : 'danger'" effect="dark">
                {{ currentLog.result === 1 ? '成功' : '失败' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="返回内容">
              <div class="response-content">{{ currentLog.responseContent }}</div>
            </el-descriptions-item>
            <el-descriptions-item v-if="currentLog.errorMsg" label="错误信息">
              <div class="error-message">{{ currentLog.errorMsg }}</div>
            </el-descriptions-item>
          </el-descriptions>
          
          <div class="dialog-footer">
            <el-button @click="detailVisible = false">关闭</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import http from '@/api/http';

export default defineComponent({
  name: 'BroadLog',
  setup() {
    const loading = ref(false);
    const logData = ref([]);
    const detailVisible = ref(false);
    const currentLog = ref(null);

    // 获取日志数据
    const fetchLogData = async () => {
      loading.value = true;
      try {
        // 调用后端接口获取数据
        const res = await http.get('api/BroadController/GetBroadLogList');
        console.log('API返回数据:', res);
        
        // 检查各种可能的数据结构
        if (res && res.status === true && res.data) {
          // 结构1: { status: true, data: [...] }
          console.log('使用 res.data 作为数据源');
          logData.value = res.data;
        } else if (res && Array.isArray(res)) {
          // 结构2: 直接返回数组
          console.log('使用 res 数组作为数据源');
          logData.value = res;
        } else if (res && res.result && Array.isArray(res.result)) {
          // 结构3: { result: [...] }
          console.log('使用 res.result 作为数据源');
          logData.value = res.result;
        } else if (res && typeof res === 'object') {
          // 结构4: 单个对象包装在数组中
          console.log('使用 [res] 作为数据源');
          logData.value = [res];
        } else {
          console.error('无法识别的数据格式:', res);
          ElMessage.error('获取日志数据格式不正确');
          logData.value = [];
        }

        console.log('处理后的表格数据:', logData.value);
      } catch (error) {
        console.error('获取日志数据失败:', error);
        ElMessage.error('获取日志数据失败');
        logData.value = [];
      } finally {
        loading.value = false;
      }
    };

    // 显示详情
    const showDetail = (record) => {
      console.log('查看详情:', record);
      currentLog.value = record;
      detailVisible.value = true;
    };

    onMounted(() => {
      console.log('组件已挂载，开始获取数据');
      fetchLogData();
    });

    return {
      loading,
      logData,
      detailVisible,
      currentLog,
      showDetail,
    };
  },
});
</script>

<style lang="less" scoped>
.broad-log-container {
  padding: 24px;
  background: #fff;
  
  .broad-log-header {
    margin-bottom: 20px;
    
    h2 {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
    }
  }
}

.success-text {
  color: #52c41a;
}

.fail-text {
  color: #f5222d;
}

.log-detail {
  padding: 20px 0;
  
  .detail-value {
    font-size: 14px;
  }
  
  .response-content, .error-message {
    padding: 12px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
    overflow-y: auto;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
  }
  
  .error-message {
    color: #f5222d;
    background-color: #fff2f0;
    border-color: #ffccc7;
  }
  
  .dialog-footer {
    margin-top: 20px;
    text-align: right;
  }
}

:deep(.broadcast-detail-dialog) {
  .el-dialog__body {
    padding: 10px 20px;
  }
  
  .el-descriptions__label {
    width: 120px;
    font-weight: bold;
  }
  
  .el-descriptions__content {
    padding: 12px 15px;
  }
}
</style>
